<template>
	<view class="content-bar">
		<view @click="onBarItem(item.id)" class="content-bar-item" :class="current == item.id?'bar-active':''"
			v-for="item in barList" :key="item.id">
			{{item.label}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "cu-nav-bar",
		data() {
			return {
				current: 1
			};
		},
		props: {
			defaultActive:{
				type: Number,
				default: 0
			},
			barList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		created() {
			console.log('defaultActive',this.defaultActive);
			this.current = this.defaultActive
		},
		methods:{
			onBarItem(id) {
				console.log('onBarItem',id);
				this.current = id
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 24rpx 0;

		.content-bar-item {
			color: rgba(0, 0, 0, 0.60);
			text-align: center;
			font-family: "PingFang SC";
			font-size: 36rpx;
			font-weight: 400;
			height: 100rpx;
			line-height: 100rpx;
		}

		.bar-active {
			color: #000;
			font-weight: bold;
			background-image: url(@/static/bar_active.png);
			background-position: bottom;
			background-size: 50rpx auto;
			background-repeat: no-repeat;
		}
	}
</style>